<!DOCTYPE html>
<html>
<head>
    <title>媒体元素示例</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: linear-gradient(to bottom, #2c3e50, #1a2980);
            color: white;
            font-family: Arial, sans-serif;
        }
        
        .container {
            max-width: 100%;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 20px 0;
        }
        
        h1 {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        .media-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-top: 20px;
        }
        
        @media (min-width: 600px) {
            .media-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        .card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            overflow: hidden;
            backdrop-filter: blur(10px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }
        
        .card-content {
            padding: 20px;
        }
        
        video, audio {
            width: 100%;
            border-radius: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>多媒体展示</h1>
            <p>图片、视频和音频示例</p>
        </header>
        
        <div class="media-grid">
            <div class="card">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="风景">
                <div class="card-content">
                    <h2>自然风景</h2>
                    <p>美丽的山脉和湖泊景色</p>
                </div>
            </div>
            
            <div class="card">
                <video controls>
                    <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
                    您的浏览器不支持视频播放
                </video>
                <div class="card-content">
                    <h2>示例视频</h2>
                    <p>MP4格式视频演示</p>
                </div>
            </div>
            
            <div class="card">
                <div class="card-content">
                    <h2>示例音频</h2>
                    <p>MP3格式音频演示</p>
                    <audio controls>
                        <source src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3" type="audio/mpeg">
                        您的浏览器不支持音频播放
                    </audio>
                </div>
            </div>
            
            <div class="card">
                <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="自然">
                <div class="card-content">
                    <h2>森林景观</h2>
                    <p>清晨的森林雾气</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>